<template>
  <div>
    <!-- 导航栏部分 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主体部分 -->
    <el-card>
      <!-- 按钮部分 -->
      <el-row class="cat_opt">
        <el-col>
          <el-button
            class="addCateButton"
            type="primary"
            @click="addCateDialogShow"
            >添加分类</el-button
          >
        </el-col>
      </el-row>

      <!-- 表格部分 -->
      <tree-table
        :data="this.cateList"
        :columns="columns"
        show-index
        :expand-type="false"
        :selection-type="false"
        border
      >
        <!-- 是否有效 -->
        <template slot="isOk" slot-scope="scope">
          <i
            class="el-icon-success"
            style="color: green"
            v-if="scope.row.cat_deleted == false"
          ></i>
          <i class="el-icon-error" style="color: red" v-else></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level == 0">一级</el-tag>
          <el-tag
            size="mini"
            v-else-if="scope.row.cat_level == 1"
            type="success"
            >二级</el-tag
          >
          <el-tag size="mini" type="info" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editCate(scope.row.cat_id, scope.row.cat_name)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteCate(scope.row.cat_id)"
            >删除</el-button
          >
        </template>
      </tree-table>

      <!-- 分页导航部分 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryInfo.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="this.queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </el-card>

    <!-- 添加分类的对话框 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addCateDialogVisible"
      width="50%"
      @close="addCateDialogClosed"
    >
      <el-form
        :model="addCateForm"
        :rules="addCateFormRules"
        ref="addCateFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- options属性指定选项数组即可渲染出一个级联选择器 -->
          <el-cascader
            v-model="selectedKeys"
            :options="ParentsCateList"
            @change="parentsCateChange"
            :props="{
              value: 'cat_id',
              label: 'cat_name',
              children: 'children',
              expandTrigger: 'hover',
              checkStrictly: true,
            }"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑分类的对话框 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="editCateDialogVisible"
      width="50%"
    >
      <el-form
        :model="editCateForm"
        :rules="editCateFormRules"
        ref="editCateRuleRef"
        label-width="150px"
      >
        <el-form-item label="请修改分类名称" prop="cat_name">
          <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCateDialog()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
name:'',
  data() {
    return {
        //默认查询条件
        queryInfo:{
            //显示三层分类列表
            type:3,
            //当前页码值
            pagenum:1,
            //每页显示多少条数据
            pagesize:5,
        },
        //商品列表信息
        cateList:[],
        //总共的商品数量,默认为0
        total:0,
        //tree表格每列的规则
        columns:[{
            label: "分类名称", 
            prop: "cat_name",
        },{
  		  	label: '是否有效',
  		  	type: 'template',
  		  	template: 'isOk',
  		  },,{
  		  	label: '排序',
  		  	type: 'template',
  		  	template: 'order',
  		  },,{
  		  	label: '操作',
  			type: 'template',
  			template: 'opt',
  		  }],
        //添加分类的对话框的显示与隐藏
        addCateDialogVisible:false,
        //修改分类的对话框的显示与隐藏
        editCateDialogVisible:false,
        //添加分类的表单数据
        addCateForm:{
          //分类名称
          cat_name:'',
          //分类父 ID
          cat_pid:0,
          //分类层级
          cat_level:0,
        },
        //编辑分类的表单数据
        editCateForm:{
          //分类名称
          cat_name:'',
          //分类ID
          cat_id:0,
        },
        //添加分类的表单规则
        addCateFormRules:{
          cat_name:{required: true, message:'请输入分类名称', trigger: 'blur'}
        },
        //编辑分类的表单规则
        editCateFormRules:{
          cat_name:{required: true, message:'请输入分类名称', trigger: 'blur'}
        },
        //父类分类的列表数据
        ParentsCateList:[],
        //选中的父类分类信息
        selectedKeys:{},
    }
  },
  created(){
      this.getCateList();
  },
  methods:{
      //获得商品列表
      async getCateList(){
          //根据查询条件发送请求
          const {data:res}=await this.$http.get('categories',{params:this.queryInfo});
          if(res.meta.status!==200) return this.$message.error('商品信息获取失败');
          //将查询到的商品信息进行赋值
          this.cateList=res.data.result;
          //将查询到的商品数量进行赋值
          this.total=res.data.total;
      },
      //每页条数
      handleSizeChange(newPagesize){
          this.queryInfo.pagesize=newPagesize;
          this.getCateList();
      },
      //当前页
      handleCurrentChange(newPagenum){
          this.queryInfo.pagenum=newPagenum;
          this.getCateList();
      },
      //弹出添加分类页面
      addCateDialogShow(){
        //第一步：获取父类分类数据列表
        this.getParentsCateList();
        //第二步：弹出添加分类页面
        this.addCateDialogVisible=true;
      },
      //获取父类分类数据列表
      async getParentsCateList(){
        //发送获取父类分类数据列表的请求
        const {data:res}= await this.$http.get('categories',{params:{type:2}});
        if(res.meta.status!=200){
          return this.$message.error('获取父类分类失败')
        };
        //将返回结果赋值到自定义的父类数据数组中
        this.ParentsCateList=res.data;
      },
      //被选中的父类分类发生改变时
      parentsCateChange(selectedKeys){
        //如果被选中的父类分类数组>0 说明有信息被选中
        if(selectedKeys.length>0){
          this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1];
          this.addCateForm.cat_level=this.selectedKeys.length;
          return
       }else{
          this.addCateForm.cat_pid=0;
          this.addCateForm.cat_level=0;
          return
        }     
      },
      //点击确认按钮后的父类分类页面
      addCate(){
        this.$refs.addCateFormRef.validate(async valid=>{
          if(!valid){
            return this.$message.error('不符合规则');
          }else{
            const{data:res}=await this.$http.post('categories',this.addCateForm)         
            if(res.meta.status!=201){
              return this.$message.error('添加分类失败');
            }else{
              this.$message.success('添加分类成功');
              this.getCateList();
              this.addCateDialogVisible = false;
            }
          }
        })

        
      },
      //关闭父类分类页面
      addCateDialogClosed(){
        //分类名称清空
        this.$refs.addCateFormRef.resetFields();
        //被选中的父类分类信息清空
        this.selectedKeys=[];
        //添加分类的表单数据清空
        this.addCateForm.cat_pid=0;
        this.addCateForm.cat_level=0;
      },
      //点击删除按钮的操作
      async deleteCate(ID){
       const result= await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        //点击取消
        if(result!='confirm'){
          return this.$message({
            type: 'info',
            message: '已取消删除'
          });   
        }else{
        //点击确认
        const {data:res}=await this.$http.delete(`categories/${ID}`);
        if(res.meta.status!==200) returnthis.$message.error('删除商品失败');
        //删除商品成功
        this.$message({
        showClose: true,
        message: '删除商品成功',
        type: 'success'
        });
        //重新获取列表数据
        this.getCateList();
        }
      },
      //点击编辑按钮的操作
      editCate(ID,NAME){
        //打开窗口
        this.editCateDialogVisible = true;
        //将原来的分类名字显示
        this.editCateForm.cat_id=ID;
        this.editCateForm.cat_name=NAME;
      },
      //点击编辑窗口中确认的操作
      async editCateDialog(){
        //弹出确认窗口
        const result= await this.$confirm('此操作将更新该分类名称, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        //点击取消
        if(result!='confirm'){
          return this.$message({
            type: 'info',
            message: '已取消更新'
          });   
        }else{
        //点击确认
        const {data:res}=await this.$http.put(`categories/${this.editCateForm.cat_id}`,{cat_name:this.editCateForm.cat_name});
        if(res.meta.status!==200) return this.$message.error('更新失败');
        //更新商品成功
        this.$message({
        showClose: true,
        message: '更新成功',
        type: 'success'
        });
        //关闭窗口
        this.editCateDialogVisible = false
        //重新获取列表数据
        this.getCateList();
        }
      }
  },
  components: {

  }
}
</script>

<style lang="less" scoped>
.el-cascader {
  width: 100%;
}
.cat_opt {
  margin-bottom: 15px;
}
</style>
